<template>
	<!-- 20230425 -->
	<view class="image-images-cn">
		<!-- 组件内容 -->
		<view class="cn-content">
			<view class="flex flex-wrap" :style="{'padding-top': space + 'rpx'}">
				<!-- 单张图片或视频 -->
				<view class="position-relative image-item radius-10" :style="{'width': width + 'rpx', 'height': height + 'rpx',
					'margin-right': ((index + 1) % column ? space : 0)+ 'rpx', 'margin-bottom': space + 'rpx'}"
					v-for="(item,index) in list" :key="index">
					<!-- 图片 -->
					<image class="jc-image radius-10" :src="item.image_url" :mode="mode" v-if="item.type == 1"
						@click="click(index)"></image>
					<!-- 视频 -->
					<image class="jc-image radius-10" :src="item.image_url" :mode="mode" v-if="item.type == 2"
						@click="play(item.video_url)"></image>
					<!-- 视频播放按钮 -->
					<text class="play-icon tyIcon-play text-50 text-ff" v-if="item.type==2"
						@click.stop="play(item.video_url)"></text>
				</view>
			</view>
		</view>

		<!-- 组件浮层 -->
		<view class="cn-layer">
			<ty-layer-pop-up v-if="video_layer_show">
				<!-- 浮层内容 -->
				<view class="layer-content bg-1a" @click.stop="">
					<!-- 关闭按钮 -->
					<view class="padding-lr-30 padding-top-50" @click="stop">
						<text class="tyIcon-close-round-line text-48 text-ff"></text>
					</view>
					<!-- 视频播放区域 -->
					<view class="video-content">
						<video class="width-100p height-100p" :src="video_url" id="video" object-fit='contain' autoplay
							:loop="loop" :show-fullscreen-btn="showFullscreenBtn" :show-play-btn="showPlayBtn"
							:enable-progress-gesture="enableProgressGesture"></video>
					</view>
				</view>
			</ty-layer-pop-up>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				video_layer_show: false,
				video_url: '',
				videoContext: {},
				loop: true, //是否循环播放视频
				showFullscreenBtn: false, //是否显示全屏按钮
				showPlayBtn: false, //是否显示视频底部控制栏的播放按钮
				enableProgressGesture: false, //是否开启控制进度的手势
			}
		},
		props: {
			// 数据
			list: {
				type: Array,
				default: []
			},
			// 图片高度
			width: {
				type: Number,
				default: 220
			},
			// 图片宽度
			height: {
				type: Number,
				default: 220
			},
			// 图片间隔
			space: {
				type: Number,
				default: 15
			},
			// 一行X个
			column: {
				type: Number,
				default: 3
			},
			// 点击图片是否放大
			previewOnClickImage: {
				type: Boolean,
				default: true
			},
			// 图片显示类型
			mode: {
				type: String,
				default: 'aspectFill'
			}
		},

		created() {
			this.videoContext = uni.createVideoContext('video')
		},

		methods: {
			// 播放视频或图片
			click(index) {
				if (this.list[index].type == 1) { //图片
					if (!this.previewOnClickImage) {
						return false
					}

					let img_list = []
					this.list.forEach(val => {
						if (val.type == 1) {
							img_list.push(val.image_url)
						}
					})
					uni.previewImage({
						current: this.list[index].image_url,
						urls: img_list
					})
				} else { //视频

				}
			},

			play(video_url) {
				this.video_layer_show = true
				this.video_url = video_url

				this.videoContext.play()
			},
			stop() {
				this.video_layer_show = false
				// let videoContext = uni.createVideoContext('video')
				this.videoContext.stop()
			},
			replay() {
				this.videoContext.play()
			}
		}
	}
</script>

<style scoped>
	/* 播放图标 */
	.play-icon {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	/* 图片或视频封面图 */
	.image-item image {
		width: 100%;
		height: 100%;
	}

	/* 浮层内容 */
	.layer-content {
		width: 100%;
		height: calc(100vh);
	}

	/* 视频播放区域 */
	.video-content {
		position: fixed;
		left: 0;
		top: calc(10vh);
		width: 100%;
		height: calc(80vh);
	}
</style>